<template>
  <div>
    <el-card>
      <el-table :data="tableData">
        <el-table-column label="任务名称" align="center" prop="exetype" />
        <el-table-column label="执行频率" align="center" prop="exefrequency">
          <template #default="{ row }">
            <span v-if="row.exefrequency === 'Y'">年</span>
            <span v-else-if="row.exefrequency === 'M'">月</span>
            <span v-else-if="row.exefrequency === 'D'">日</span>
            <span v-else>停止</span>
          </template>
        </el-table-column>
        <el-table-column label="执行日" align="center" prop="exeday">
          <template #default="{ row }">
            <span>{{
              row.exeday !== null ? `每${row.exeday}号执行` : ''
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="执行时间" align="center">
          <template #default="{ row }">
            <span v-if="row.exefrequency !== 'S'">{{
              (row.exehour.toString().length > 1
                ? row.exehour
                : '0' + row.exehour) +
              ':' +
              (row.exeminute.toString().length > 1
                ? row.exeminute
                : '0' + row.exeminute) +
              ':' +
              (row.exesecond.toString().length > 1
                ? row.exesecond
                : '0' + row.exesecond)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <el-button link type="primary" @click="update(row)">配置</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @change="handelPagination"
      />

      <updateDialog ref="updateRef" :dialogList="dialogList" />
    </el-card>
  </div>
</template>

<script  setup>
import { ref } from 'vue'
import updateDialog from '@/views/disposition/customTask/component/dialog.vue'
import { getcustomList } from '@/api/config/customtack.js'
const total = ref(50)
const dialogList = ref({})
const queryParams = ref({
  pageNo: 1,
  pageSize: 10
})
const tableData = ref([])

const getList = () => {
  // 后端接口
  getcustomList(queryParams.value).then((res) => {
    console.log(res)
    tableData.value = res.data.pagination.list
    total.value = res.data.pagination.total
  })
}
const updateRef = ref(null)
const update = (row) => {
  updateRef.value.dialogVisible = true
  dialogList.value = row
  console.log(row)
}
// 分页
const handelPagination = (currentPage, pageSize) => {
  queryParams.value.pageNum = currentPage
  queryParams.value.pageSize = pageSize
}
getList()
</script>

<style lang="scss" scoped>
.button_row {
  text-align: center;
  margin-top: 30px;
}
</style>
